<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../tf-graph/tf-graph-icon.html">

<dom-module id="tf-node-list-item">
  <style>
  #list-item {
    width: 100%;
    color: #565656;
    font-size: 11pt;
    font-weight: 400;
    position: relative;
    display: inline-block;
  }

  #list-item:hover {
    background-color: var(--google-yellow-100);
  }

  .clickable {
    cursor: pointer;
  }

  #list-item span {
    margin-left: 40px;
  }

  #list-item.excluded span {
    color: #999;
  }

  #list-item span.edge-label {
    float: right;
    font-size: 10px;
    margin-left: 3px;
    margin-right: 5px;
  }

  .node-icon {
    position: absolute;
    top: 1px;
    left: 2px;
  }
  </style>
  <template>
    <div id="list-item"
         on-mouseover="_nodeListener"
         on-mouseout="_nodeListener"
         on-click="_nodeListener">
      <tf-graph-icon class="node-icon" height="12"
          color-by="[[colorBy]]" color-by-params="[[colorByParams]]"
          node="[[itemNode]]" render-info="[[itemRenderInfo]]"
          template-index="[[templateIndex]]"></tf-graph-icon>
      <span title$="[[name]]">[[name]]</span>
      <span class="edge-label">[[edgeLabel]]</span>
    </div>
  </template>

  <script>
    (function() {
      Polymer({
        is: 'tf-node-list-item',

        properties: {
          /**
           * The Node for the card itself, on which this item is being drawn.
           * @type {tf.graph.Node}
           */
          cardNode: Object,
          /**
           * The Node for the item within the card, somehow related to cardNode.
           * @type {tf.graph.Node}
           */
          itemNode: Object,
          /** The edge label associated with this item. */
          edgeLabel: String,
          /**
           * The render node information for the item node. Used by the graph
           * icon in determining fill color.
           */
          itemRenderInfo: Object,
          name: String,
          itemType: {
            type: String,
            observer: '_itemTypeChanged'
          },
          colorBy: String,
          colorByParams: Object,
          templateIndex: Function
        },

        _itemTypeChanged: function() {
          if (this.itemType !== 'subnode') {
            this.$['list-item'].classList.add('clickable');
          } else {
            this.$['list-item'].classList.remove('clickable');
          }
        },

        _nodeListener: function(event) {
          // fire node.click/mouseover/mouseout
          this.fire('node-list-item-' + event.type, {
            cardNode: this.cardNode.name,
            nodeName: this.name,
            type: this.itemType
          });
        }
      });
    })();
  </script>
</dom-module>
